<template>
  <view>
    <view class="container">
      <view class="image-banner">
        <image style="width: 100%;" mode="widthFix" src="@/static/images/synthesis/index/banner.png" alt="命理精算"></image>
        <image class="pan" mode="widthFix" src="@/static/images/synthesis/index/pan.gif" alt=""></image>
      </view>
      <view class="tips">
        <image class="tips-img" mode="widthFix" src="@/static/images/synthesis/index/tips.png" alt=""></image>
      </view>
      <view class="info-div">
        <view class="example">
          <!-- 自定义表单校验 -->
          <uni-forms class="info-box" ref="customForm" :modelValue="customFormData">
            <uni-forms-item label="您的姓名" name="name">
              <uni-easyinput :inputBorder="false" v-model="customFormData.name" placeholder="请输入姓名(必须汉字)" placeholderStyle="font-size:28rpx" />
            </uni-forms-item>
            <uni-forms-item label="您的性别" name="sex">
              <view>
                <uni-data-checkbox selectedColor="#666666" selectedTextColor="#666666" v-model="customFormData.sex" :localdata="sexs" />
              </view>
            </uni-forms-item>
            <uni-forms-item label="出生日期" name="date">
              <view class="lunar-picker">
                <lunar-picker ref="lunarPicker" v-model="customFormData.date" @change="changeLog($event)"></lunar-picker>
              </view>
            </uni-forms-item>
            <uni-forms-item label="出生地区" name="area">
              <view class="lunar-picker">
                <area-picker ref="areaPicker" v-model="customFormData.area" @change="areaChange($event)" placeholder="请选择出生地区"></area-picker>
              </view>
            </uni-forms-item>
            <uni-forms-item label="测算号码" name="phone">
              <uni-easyinput :inputBorder="false" v-model="customFormData.phone" placeholder="请输入待测算的手机号码" placeholderStyle="font-size:28rpx" />
            </uni-forms-item>
          </uni-forms>
          <view class="btn-box">
            <image class="test-btn" mode="widthFix" src="@/static/images/synthesis/index/test-btn.png" alt="开始分析" @click="submit"></image>
          </view>
        </view>
      </view>
      <view class="result-box">
        <view class="result-btn" @click="viewHistory">查看已测算结果</view>
      </view>
      <view>
        <img style="width: 100%;display: block;" src="@/static/images/synthesis/index/bg-add.png" alt="命理精算"/> 
      </view>
    </view>
		<uni-popup ref="popup" type="center" :is-mask-click="false" mask-background-color="rgba(0,0,0,0.8)">
			<div class="login-hit-box">
				<img class="login-hit-img" src="@/static/images/synthesis/index/hit-content.png">
				<view class="login-hit-btn" @click="loginHitTarget">
					<img class="login-hit-btn-img" src="@/static/images/synthesis/index/confirm.png">
				</view>
				<view class="login-hit-btn" @click="loginHitClose">
					<img class="login-hit-btn-img" src="@/static/images/synthesis/index/cancel.png">
				</view>
			</div>
		</uni-popup>
    <!-- 支付弹窗 -->
    <uni-popup ref="confirmPopup" type="center" :mask-click="false" mask-background-color="rgba(0,0,0,0.8)">
      <div class="pay-hit-box">
        <uni-forms class="pay-info-box" ref="customForm">
          <view class="pay-tips">
            确认你的个人信息
          </view>
          <view class="pay-info-div">
            <view class="pay-info-title">您的姓名</view>
            <view class="pay-info-item">{{param.username}}</view>
          </view>
          <view class="pay-info-div">
            <view class="pay-info-title">您的性别</view>
            <view class="pay-info-item">{{param.sex==0?"男":"女"}}</view>
          </view>
          <view class="pay-info-div">
            <view class="pay-info-title">出生日期</view>
            <view class="pay-info-item">{{param.birthday}}</view>
          </view>
          <view class="pay-info-div">
            <view class="pay-info-title">出生地区</view>
            <view class="pay-info-item">{{param.area}}</view>
          </view>
          <view class="pay-info-div">
            <view class="pay-info-title">测算号码</view>
            <view class="pay-info-item">{{param.phone}}</view>
          </view>
        </uni-forms>
        <view class="login-hit-btn" @click="confrmSubmit">
          <img class="login-hit-btn-img" src="@/static/images/synthesis/index/confirm.png">
        </view>
        <view class="login-cancel-btn" @click="close">
          <img class="login-cancel-btn-img" src="@/static/images/synthesis/index/cancel.png">
        </view>
      </div>
    </uni-popup>
		<drag-button :isDock="true" :existTabBar="true"/>
		<teacher-button :isDock="true" :existTabBar="true"/>
  </view>
</template>

<script>
	import calendar from '@/components/lunar-datetime-picker/js/calendar'
	import lunarPicker from "@/components/lunar-datetime-picker/lunar-datetime-picker.vue";
	import areaPicker from "@/components/area-picker/area-picker.vue";
	export default {
		components: {
			lunarPicker,
			areaPicker
		},
		data() {
			return {
				customFormData: {
					name: '',
					sex: 0,
					date: [],
					area: [],
          local: [],
					phone: ''
				},
				sexs: [
					{
						text: '男',
						value: 0
					},
					{
						text: '女',
						value: 1
					},
				],
        param: {}
			}
		},
		methods: {
			changeLog(e) {
				console.log(e)
			},
			areaChange(e) {
				console.log(e)
			},
			validateForm(form) {
				// 校验名字
				let {name, date, area, phone} = form;
				if (name == '' || name == null || name == undefined) {
					uni.showToast({
						title: '姓名不能为空',
						icon: 'none'
					});
					return false
				};
				if (name.length < 2 || name.length > 5) {
					uni.showToast({
						title: '姓名长度在2到5个字符',
						icon: 'none'
					});
					return false
				};
				var reg = /[\u4e00-\u9fa5]/gm;
				if (!reg.test(name)) {
					uni.showToast({
						title: '名字必须为汉字',
						icon: 'none'
					});
					return false
				}
				if (date.length < 5) {
					uni.showToast({
						title: '请选择出生日期',
						icon: 'none'
					});
					return false
				}
				if (area == '' || area == null || area == undefined) {
					uni.showToast({
						title: '请选择出生地区',
						icon: 'none'
					});
					return false
				}
				var reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57]|19[19])[0-9]{8}$/;
				if (!reg.test(phone)) {
					uni.showToast({
						title: '请输入正确的待测算手机号',
						icon: 'none'
					});
					return false
				}
				return true
			},
			submit() {
				// console.log(this.customFormData);
				// 规则校验
				let validate = this.validateForm(this.customFormData);
				if (!validate ) return false;
				let {name, sex, date, phone} = this.customFormData;
				// 日期 和 时间信息
				let dateInfo;
				if (this.$refs.lunarPicker.isLunar) {
					let isLeapMonth = false;
					let leapMonth = calendar.leapMonth(1900+date[0]);
					// 为闰月时月份减一,因为calendar方法中,闰不闰月的月份传值一样,靠isLeapMonth参数区分是否为闰月
					if (leapMonth != 0 && date[1] == leapMonth) {
						isLeapMonth = true;
					}
          // 根据闰月位置判断是否加减
          let tempMonth = date[1] + 1;
          if (leapMonth != 0) {
            if (isLeapMonth) {
              tempMonth = date[1]
            }else{
              tempMonth = date[1] <= leapMonth ? date[1]+1 : date[1];
            }            
          }
					dateInfo = calendar.lunar2solar(1900+date[0], tempMonth, date[2]+1, isLeapMonth);
				}else{
					dateInfo = calendar.solar2lunar(1900+date[0], date[1]+1, date[2]+1);
				}
				let year = dateInfo.cYear
				let month = dateInfo.cMonth > 9 ? dateInfo.cMonth : '0'+dateInfo.cMonth;
				let day = dateInfo.cDay > 9 ? dateInfo.cDay : '0'+dateInfo.cDay;
				let time = `${date[3] > 9 ? date[3] : '0' + date[3]}:${date[4] > 9 ? date[4] : '0' + date[4]}`;
				// 地区和真太阳时换算
				let area = this.$refs.areaPicker.selectedArea;
				let solartime = this.$refs.areaPicker.solarTimeCalc(dateInfo.cYear, dateInfo.cMonth, dateInfo.cDay, date[3], date[4]);
				// 生成订单
				this.param = {
					birthday: `${year}-${month}-${day} ${time}`,
					sex: sex,
					username: name,
					solartime: solartime,
					area: area,
					phone: phone
				}
        this.$refs.confirmPopup.open()
        return
			},
			loginHitClose() {
				this.$refs.popup.close()
			},
			loginHitTarget() {
				let {name, sex, date, phone} = this.customFormData;
				// 日期 和 时间信息
				let dateInfo;
				if (this.$refs.lunarPicker.isLunar) {
					let isLeapMonth = false;
					let leapMonth = calendar.leapMonth(1900+date[0]);
					// 为闰月时月份减一,因为calendar方法中,闰不闰月的月份传值一样,靠isLeapMonth参数区分是否为闰月
					if (leapMonth != 0 && date[1] == leapMonth) {
						isLeapMonth = true;
					}
					dateInfo = calendar.lunar2solar(1900+date[0], isLeapMonth ? date[1]+1 - 1 : date[1]+1, date[2]+1, isLeapMonth);
				}else{
					dateInfo = calendar.solar2lunar(1900+date[0], date[1]+1, date[2]+1);
				}
				let year = dateInfo.cYear
				let month = dateInfo.cMonth > 9 ? dateInfo.cMonth : '0'+dateInfo.cMonth;
				let day = dateInfo.cDay > 9 ? dateInfo.cDay : '0'+dateInfo.cDay;
				let time = `${date[3] > 9 ? date[3] : '0' + date[3]}:${date[4] > 9 ? date[4] : '0' + date[4]}`
				let birthday = `${year}-${month}-${day} ${time}`;
				// 地区和真太阳时换算
				let area = this.$refs.areaPicker.selectedArea;
				let solartime = this.$refs.areaPicker.solarTimeCalc(dateInfo.cYear, dateInfo.cMonth, dateInfo.cDay, date[3], date[4]);
				this.loginHitClose();
				uni.navigateTo({
					url: `/pages/my/login/login?type=synthesis&birthday=${birthday}&sex=${sex}&name=${name}&area=${area}&solartime=${solartime}&phone=${phone}`
				})
			},
      close() {
        this.$refs.confirmPopup.close();
      },
      confrmSubmit() {
        uni.showLoading({
        	title: '测算中',
        	mask: true
        });
        // 跳转订单页
        let param = this.param;
        uni.hideLoading();
        this.$refs.confirmPopup.close()
        uni.navigateTo({
        	url: `/pages/synthesis/transition/transition?birthday=${param.birthday}&sex=${param.sex}&username=${param.username}&solartime=${param.solartime}&area=${param.area}&phone=${param.phone}`
        })
      },
      viewHistory() {
        let sub = uni.getStorageSync('sub');
        let origin = window.location.origin;
        window.location.href = `${origin}/uniteby/pages/search/search?sub=${sub}`;
      },
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background: url('@/static/images/synthesis/index/bg.png') no-repeat;
		background-size: 100% 100%;
		.image-banner {
			display: flex;
			flex-direction: column;
			width: 100%;
			height: auto;
			box-sizing: border-box;
      position: relative;
      overflow: hidden;
      .pan {
        position: absolute;
        right: -180rpx;
        top: 50rpx;
      }
		}
		.lunar-picker {
			height: 100%;
			width: 100%;
			display: flex;
			align-items: center;
		}
		.info-box {
			box-sizing: border-box;
			margin: 30rpx auto;
			padding: 48rpx 70rpx 0;
      width: 640rpx;
      height: 560rpx;
      background-color: #fcefdd;
      border-radius: 15rpx;
      border: solid 4rpx #a51a04;
			::v-deep .label-text {
        color: #bb2800;
				font-size: 28rpx;
        font-weight: bold;
			}
			::v-deep .uni-forms-item__inner {
        padding-left: 20rpx;
				padding-bottom: 0rpx;
        border-radius: 10rpx;
        border: solid 2rpx #361c0a;
        margin-bottom: 18rpx;
			}
			::v-deep .uni-easyinput__content-input {
				padding-left: 0px!important;
			}
		}
		.tips {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: center;
		}
    .tips-img {
      width: 381rpx;
    }
		.btn-box {
			display: flex;
			flex-direction: row;
			justify-content: center;
      margin-bottom: 81rpx;
		}
		.test-btn { 
			width: 640rpx;
      animation-name: scaleDraw;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-duration:0.5s;
		}
    .result-box {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: center;
      margin-bottom: 40rpx;
    }
    .result-btn {
      color: #bb2800;
      font-weight: bold;
      font-size: 36rpx;
      text-decoration: underline;
    }
	}
.login-hit-box {
  width: 80%;
  margin: auto;
  box-sizing: border-box;
  position: relative;
}
.login-hit-close {
  position: absolute;
  right: 0;
  top: 0;
  width: 80rpx;
  height: 80rpx;
  cursor: pointer;
  z-index: 99;
}
.login-hit-img {
  width: 100%;
  margin-bottom: 56rpx;
}
.login-hit-btn {
  width: 640rpx;
	height: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-hit-btn-img {
  width: 100%;
  display: block;
}
.login-cancel-btn {
  width: 640rpx;
  height: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40rpx;
}
.login-cancel-btn-img {
  width: 123rpx;
  height: 40rpx;
}
.pay-hit-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pay-info-box {
  width: 645rpx;
  height: 353rpx;
  background: url('@/static/images/synthesis/index/content-bg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  padding: 0 30rpx 60rpx;
  margin-bottom: 47rpx;
  ::v-deep .label-text {
    font-size: 28rpx;
  }
  ::v-deep .uni-easyinput__content-input {
    padding-left: 0px!important;
  }
}
.pay-info-div {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 6rpx 20rpx 6rpx;
}
.pay-info-title {
  padding-right: 20rpx;
  font-size: 30rpx;
  color: #361c0a;
  white-space: nowrap;
}
.pay-info-item {
	font-size: 30rpx;
	color: #000000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pay-tips {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  color: #fff;
}
</style>
